<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./src/css/bootstrap.min.css">
  <link rel="stylesheet" href="./src/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="./src/css/index.css" />
  <style>
   
   .lis1{
     width: 100%;
     height: 60px;
   
     display: flex;
   }
   .lis1 .im{
    width: 20%;
    height: 60px;
   }
   .im img{
     width: 100%;
     height: 70%;
     margin-top: 8px;
   }
   .lis1 .left{
    width: 40%;
    display: flex;
    height: 60px;
    justify-content: space-around;
    align-items: center;
    margin-left: 10px;
   }
   .lis1 .right{
     width: 30%;
     height: 60px;
     display: flex;
     justify-content: space-around;
     align-items: center;
     margin-left: 80px;
   }
   .lunbo{
     width: 100%;
     height: 300px;
   }
   .lunbo img{
     width: 100%;
     height: 100%;
   }
   .three{
     width: 100%;
     height: 60px;
     display: flex;
     justify-content: space-between;
   }
   .three div{
     width: 30%;
     height: 60px;
     line-height: 60px;
     text-align: center;
   }
   .three div:nth-child(1){
    border-bottom: 1px solid #f00;
   }
   .three div:hover{
     border-bottom: 1px solid #f00;
   }
   .list{
     width: 100%;
     height: 100px;
     display: flex;
    margin-left: 50px;
    
   }
   .list div{
     width: 150px;
     height: 100px;
     margin-left: 20px;
   }
   .for{
     width: 100%;
     height: 270px;
     display: flex;
   }
   .for div{
     width: 300px;
     height: 250px;
     padding: 20px 0;
     text-align: center;
     border: 1px solid #ccc;
     margin-left: 10px;
     margin-top: 20px;
   }
   .for div img{
     width: 100%;
     height: 100px;
   }
   .xinwen{
     width: 100%;
     height: 400px;
     margin-top: 20px;
     border: 1px solid #f00;
   }
   .xinwen .top{
     width: 100%;
     display: flex;
     justify-content: space-between;
     height: 50px;
   }
   .xinwen .top1{
     display: flex;
     width: 100%;
     height: 350px;
   }
   .top1 .top2{
    width: 70%;
     height: 350px;
   }
   .top2 img{
     width: 100%;
     height: 100%;
   }
   .top1 .top3{
    width: 30;
     height: 350px;
     text-align: center;
   }
   .top3 p{
     margin-top: 20px;
   }
   .gy{
     width: 100%;
     height: 300px;
   }
   .gy .ll{
     width: 100%;
     height: 160px;
   }
   .ll img{
     width: 100%;
     height: 250px;
   }

   .cg{
     width: 100%;
     height: 300px;
   }
   .cg .la{
     width: 100%;
     height: 260px;
     background-image: url(./src//img/lj.jpg);
   }
   .fo{
     width: 100%;
     height: 300px;
   }
   .fo img{
     width: 100%;
     height: 100%;
   }
   .lubo{
       width: 100%;
       height: 300px;
       overflow: hidden;
   }
   .trent-slider{
       width: 100%;
       height: 300px;
   }
   .current-t-slide{
    width: 100%;
    height: 300px;
   }
   .current-t-slide img{
       width: 100%;
       height: 100%;
   }

   
  
   
 @keyframes load {0% {width:0%;} 100% {width:100%;}}
.trent-slider {width:100%;position:relative;overflow:hidden;}
.t-slide {position:absolute;left:0;right:0;bottom:0;top:0;transition:.65s;}
.t-slide img {width:100%;height:100%;}
.t-slider-controls {position:absolute;top:0;bottom:0;left:0;right:0;} 
.t-slider-controls .arrow {min-height:100%;width:50px;position:relative;transition:.25s;}
.t-slider-controls .arrow:hover {cursor:pointer;}
.t-slider-controls .right-arrow {float:right;} .t-slider-controls .left-arrow {float:left;}
.t-slider-controls .arrow .arrow-container {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;}
.t-slider-controls .arrow .arrow-container .arrow-icon {position:relative;width:42px;height:42px;color:#fafafa;border-radius:50%;}
.t-slider-controls .arrow .arrow-container .arrow-icon i {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.t-slider-controls .t-load-bar {width:100%;height:5px;}
.t-slider-controls .t-load-bar .inner-load-bar {background:rgba(200,200,200,0.65);height:100%;}
.t-slider-controls .t-dots-container {position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:20px;min-width:350px;}
.t-slider-controls .t-slide-dots-wrap {height:100%;width:100%;position:relative;}
.t-slider-controls .t-slide-dots {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:table;content:"";clear:both;}
.t-slider-controls .t-slide-dots .t-dot {background:#fafafa;width:8px;height:8px;margin:5px;float:left;border-radius:50%;transition:.65s;} 
.t-slider-controls .t-slide-dots .t-dot.current-dot,.t-slider-controls .t-slide-dots .t-dot:hover {transform:scale(1.65);cursor:pointer;}
/*close slider css*/
@media screen and (min-width:768px) {.t-slider-controls .arrow:hover {background:rgba(0,0,0,0.32);}} 

   

  </style>
</head>

<body>
  <div class="lis1">
    <div class="im">
      <img src="/src/img/lianxiang.png" alt="">
    </div>
    
    <div class="left">
      <span>商城</span>
      <span>企业购</span>
      <span>政教及大企业</span>
      <span>服务</span>
      <span>品牌</span>
    </div>
    <div class="right">
     <span>会员</span>
     <span>社区</span>
     <span>购买</span>
     <span>🔍</span>
     <span>登录</span>
     <span>注册</span>
     <span>🛒</span>
    </div>
  </div>
  <!-- 轮播 -->
  <!-- <div class="lunbo">
  <img src="./src/img/lunbo1.jpg" alt="">
  </div> -->

  <!-- <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="../src/img/lunbo1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./src/img/轮播1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./src/img/轮播2.jpg" alt=""></div>
        </div>
        < 如果需要分页器 -->
    <!--     <div class="swiper-pagination"></div> -->
    
        <!-- 如果需要导航按钮 -->
    <!--     <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div> --> 
    <div class="lubo">
        <div class="trent-slider">
            <div class="t-slide current-t-slide">
              <img src="./src/img/lunbo1.jpg" alt="" />
            </div>
            <div class="t-slide">
              <img src="./src/img/轮播1.jpg" alt="" />
            </div>
            <div class="t-slide">
              <img src="./src/img/轮播2.jpg" alt="" />
            </div>
            
            <div class="t-slider-controls">
              <div class="arrow right-arrow">
                <div class="arrow-container">
                  <div class="arrow-icon"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
                </div>
              </div>
              <div class="arrow left-arrow">
                <div class="arrow-container">
                  <div class="arrow-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
                </div>
              </div>
              <div class="t-load-bar">
                <div class="inner-load-bar"></div>
              </div>
              <div class="t-dots-container">
                <div class="t-slide-dots-wrap">
                  <div class="t-slide-dots">
           
                  </div>
                </div>
              </div>
            </div>
          </div>
    </div>
    

  <!-- 三个 -->
  <div class="three">
    <div>个人及家庭产品</div>
    <div>中小企业产品</div>
    <div>政教及大产业产品</div>
  </div>
  <!-- 列表 -->
 <div class="list">
   <div>
     <img src="./src//img/d1.png" alt="">
     <p>lenovo联想</p>
   </div>
   <div>
     <img src="./src//img/d1.png" alt="">
    <p>lenovo笔记本</p>
  </div>
   <div>
    <img src="./src//img/d1.png" alt="">
    <p>lenovo电脑</p>
   </div>
   <div>
    <img src="./src//img/d1.png" alt="">
    <p>lenovo联想</p>
   </div>
   <div>
    <img src="./src//img/d1.png" alt="">
    <p>lenovo联想</p>
   </div>
   <div>
    <img src="./src//img/d1.png" alt="">
    <p>lenovo联想</p>
   </div>
   <div>
    <img src="./src//img/d1.png" alt="">
    <p>lenovo联想</p>
   </div>

 </div>

 <!-- 四个 -->
 <div class="for">
   <div>
     <img src="./src/img/d2.png" alt="">
     <p>
      联想/Lenovo 23.8英寸高清屏75Hz刷新率商务办公显示器L24e-34
    </p>
     <p>
      家用办公台式机笔记本电脑通用，无线轻薄，双色可选                  
     </p>
     <p><span>￥</span><span>49.9</span></p>
   </div>
   <div>
    <img src="./src/img/d2.png" alt="">
    <p>
     联想/Lenovo 23.8英寸高清屏75Hz刷新率商务办公显示器L24e-34
   </p>
    <p>
     家用办公台式机笔记本电脑通用，无线轻薄，双色可选                  
    </p>
    <p><span>￥</span><span>49.9</span></p>
  </div>
  <div>
    <img src="./src/img/d2.png" alt="">
    <p>
     联想/Lenovo 23.8英寸高清屏75Hz刷新率商务办公显示器L24e-34
   </p>
    <p>
     家用办公台式机笔记本电脑通用，无线轻薄，双色可选                  
    </p>
    <p><span>￥</span><span>49.9</span></p>
  </div>
  <div>
    <img src="./src/img/d2.png" alt="">
    <p>
     联想/Lenovo 23.8英寸高清屏75Hz刷新率商务办公显示器L24e-34
   </p>
    <p>
     家用办公台式机笔记本电脑通用，无线轻薄，双色可选                  
    </p>
    <p><span>￥</span><span>49.9</span></p>
  </div>

 </div>
 
  <!-- 新闻 -->
  <div class="xinwen">
    <div class="top">
      <span>新闻中心</span>
      <span>更新></span>
    </div>
    <div class="top1">
      <div class="top2">
        <img src="./src/img/db3.jpg" alt="">
      </div>
      <div class="top3">
        <p>
          <h5>营收破1200亿！联想集团第三财季再创新高</h5>
          <h5>2022年2月23日——中国数字经济领导企业联...</h5>
          <h5>2022年2月23日</h5>
        </p>
        <p>
          <h5>“中国智造”构建数字底座，联想发布SR588V2双路机架式服务器</h5>
          <h5>2月28日，联想企业科技集团正式更新“中国智造”...</h5>
          <h5>2022年2月28日</h5>
        </p>
        <p>
          <h5>纵“智”更互联，畅“享”更高速：...</h5>
          <h5>2月25日，联想企业科技集团正式发布“中国智造”...</h5>
          <h5>2022年2月23日</h5>
        </p>
      </div>
    </div>
  </div>
  <!-- 公益 -->
  <div class="gy">
    <h2>联想公益</h2>
    <!-- <div class="ll">
      <img src="/src/img/lunbo1.jpg" alt="">
    </div> -->
    <div class="lubo">
        <div class="trent-slider">
          
            <div class="t-slide">
              <img src="./src/img/轮播1.jpg" alt="" />
            </div>
            <div class="t-slide">
              <img src="./src/img/轮播2.jpg" alt="" />
            </div>
            
            <div class="t-slider-controls">
              <div class="arrow right-arrow">
                <div class="arrow-container">
                  <div class="arrow-icon"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
                </div>
              </div>
              <div class="arrow left-arrow">
                <div class="arrow-container">
                  <div class="arrow-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
                </div>
              </div>
              <div class="t-load-bar">
                <div class="inner-load-bar"></div>
              </div>
              <div class="t-dots-container">
                <div class="t-slide-dots-wrap">
                  <div class="t-slide-dots">
           
                  </div>
                </div>
              </div>
            </div>
          </div>
    </div>
  </div>
<!-- 成功 -->
  <div class="cg">
    <h2>成功案例</h2>
    <div class="la">
     
    </div>
  </div>
  <!-- 底部 -->
 <div class="fo">
  <img src="./src/img//d5.png" alt="">
 </div>
 

 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


  <!-- bootstrap -->
<script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/main.js"></script>


  <script src="./src/js/bootstrap.min.js"></script>
  <script src="./src/js/jquery-3.4.1.js"></script>
  <script src="./src/js/index.js"></script>
  <script>

  </script>


	
	
</body>

</html>